<template>
  <div id="csbghxjdt"></div>
</template>

<script>
import { defineComponent, ref, nextTick } from "vue";
export default defineComponent({
  name: "Csbghxjdt",
});
</script>
<script setup>
import * as echarts from "echarts";

// progress bar value
const progressBarValue = ref(80);

nextTick(() => {
  let dom = document.getElementById("csbghxjdt");
  let myChart = echarts.init(dom);
  let option = {
    backgroundColor: "#313131",
    title: {
      text: progressBarValue.value + "%",
      left: "center",
      top: "45%",
      itemGap: 10,
      textStyle: {
        color: "#fff",
        fontSize: "70",
        fontWeight: 600,
      },
      // subtextStyle: {
      //   color: "#fff",
      //   fontSize: "50",
      //   fontWeight: 600,
      // },
    },
    angleAxis: {
      max: 100,
      // 隐藏刻度线
      show: false,
      startAngle: 90,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    polar: {
      radius: "100%", //图形大小
    },
    series: [
      {
        type: "bar",
        data: [progressBarValue.value],
        showBackground: true,
        roundCap: true,
        backgroundStyle: {
          color: "rgb(53, 61, 75)",
        },
        coordinateSystem: "polar",
        barWidth: 14,
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(98, 255, 200, 1)",
                },
                {
                  offset: 1,
                  color: "rgba(50, 209, 231, 1)",
                },
              ],
              global: false,
            },
          },
        },
      },
    ],
  };

  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#csbghxjdt {
  width: 50vw;
  height: 50vh;
  background: black;
}
</style>
